<html>
	<head>
		<script language='javascript' src='js/popcalendar.js'></script>
		<title>fuushikaden web studio</title>
		<style>
			td {
				font-family: verdana;
				font-size:11px;
				line-height:17px;
			}

			a {
				color:#707070;
				text-decoration:none;
			}

			a:hover {
				color:#0000aa;
				text-decoration:underline;
			}
		</style>
	</head>
	<body bgcolor='#a0a0a0'>
		<center>
			<table width='775' cellpadding=0 cellspacing=0 border=0 style='border-color:#909090; border-width:1px; border-style:solid'>
				<tr><td><IMG SRC="logo.gif" WIDTH="569" HEIGHT="58" BORDER="0" ALT=""><A HREF="http://www.pghoster.com"><IMG SRC="pghoster.gif" WIDTH="206" HEIGHT="58" BORDER="0" ALT=""></A></td></tr>
				<tr><td background='back.gif'><a href='index.htm' onmouseover='hm.src="ico_hm_2.gif"' onmouseout='hm.src="ico_hm_1.gif"'><IMG id="hm" SRC="ico_hm_1.gif" WIDTH="57" HEIGHT="30" BORDER="0" ALT=""></a><IMG id="pc" SRC="ico_pc_3.gif" WIDTH="112" HEIGHT="30" BORDER="0" ALT=""><a href='mn-intro.htm' onmouseover='dm.src="ico_dm_2.gif"' onmouseout='dm.src="ico_dm_1.gif"'><IMG id='dm' SRC="ico_dm_1.gif" WIDTH="112" HEIGHT="30" BORDER="0" ALT=""></a><a href='http://www.pengz.com/forums' onmouseover='fr.src="ico_fr_2.gif"' onmouseout='fr.src="ico_fr_1.gif"'><IMG id="fr" SRC="ico_fr_1.gif" WIDTH="57" HEIGHT="30" BORDER="0" ALT=""></a><a href='testimonial.htm' onmouseover='tm.src="ico_tm_2.gif"' onmouseout='tm.src="ico_tm_1.gif"'><IMG id='tm' SRC="ico_tm_1.gif" WIDTH="79" HEIGHT="30" BORDER="0" ALT=""></a></td></tr>
				
				<tr bgcolor='#E0F0F0' style='padding:5px'>
				<td>
					&nbsp;<B>Introduction</B>&nbsp;&nbsp;<font color='#c0c0c0'>|</font>&nbsp;&nbsp;<A href='dp-download.htm'>Download</a>&nbsp;&nbsp;<font color='#c0c0c0'>|</font>&nbsp;&nbsp;<A href='dp-credits.htm'>Updates and Credits</a>
				</td></tr>

				<tr valign=top height='300' bgcolor='#f9f9f9'><td style='padding:10px'>
					<table><tr><td width='650' style='padding:15px'><div align='justify'>
					<font color='#505050'>
				<font style='line-height:16px'>
				After searching some time for a popup date picker for a project, I realised that I am unable to find one which at the same time has a layout that caught my eyes, and one that can fulfill the minimum requirement of cross browser compatibility and user friendliness. At the same time, I am beginning to be awed by the ability of DHTML, hence set myself this project to do after my work during my free time.<BR><BR>Of course, this might not be the perfect date picker, or the nicest one in the world. Some features like NS4 (Netscape 4) compatibility are omitted, seriously because I have not yet picked up NS4's DHTML techniques. However, with the release of Netscape 6, after some time, I might not need to pick it up at all, hopefully (^_^;) <BR><BR>
				<B><U>Demonstration # 1</U></B><BR><BR>
					This demonstration caters for Netscape 4, but showing the date value in a text box. The trigger is a button, and the data container is the text box.<BR><BR><blockquote>
					<form name='mainform' method='post'>
						<input type=text name='datevalue' size=10 maxlength=10 value='02/02/2002'>
						<script language='javascript'>
						<!--
							if (!document.layers) {
								document.write("<input type=button onclick='popUpCalendar(this, mainform.datevalue, \"dd/mm/yyyy\")' value='select' style='font-size:11px'>")
							}
						//-->
						</script>					
					</form>
					</blockquote><BR><BR>
				<B><U>Demonstration # 2</U></B><BR><BR>	
					The following demonstration uses a button as both a trigger and data container.<BR><font color='#a0a0a0'>(You will not see anything below if you are using Netscape Navigator 4)</font><blockquote>
					<input style='font-size:11px' type=button value="2 December 2001" onclick='popUpCalendar(this, this, "d mmm yyyy")'>
					</blockquote><BR>
				<B><U>How To Use</U></B><BR><BR>
					Usage is very simple. Firstly, you will need to include a javascript library at the top of your html file like this ...<BR><BR>
					<blockquote>&lt;script language='javascript' src='popcalendar.js'&gt;&lt;/script&gt;</blockquote>
					After which, put the following line inside the onclick event of a button, <BR><BR>
					<blockquote>popUpCalendar(this, this, "d mmm yyyy")</blockquote>
					The first "this" in the parameter list refers to the trigger control (in this case the button).  The second "this" refer to the control to hold the value of the date, which is the same button in this case.  The third parameter refers to the date format.  The date format can have three types of separators: hyphen(-), space( ), or slash(/), but must be consistent in their usage.  E.g. 
					<blockquote>d/m/yyyy</blockquote>
					The acceptable tokens are :-
					<blockquote>
						d - date<BR>
						dd - date (padded with 0 if less than 10)<BR>
						m - month (in numbers)<BR>
						mm - month (in numbers, padded with 0 if less than 10)<BR>
						mmm - month (in words "January", "February", ...)<BR>
						mmmm - month ("JAN", "FEB", ...) <font style='font-size:9px;color:#ff0000'>[ new ]</font><BR>
						yy - 2 digit year <font style='font-size:9px;color:#ff0000'>[ new ]</font><BR>
						yyyy - 4 digit year
					</blockquote>
					The default value you place in the date container must be the same format as the format you specified, otherwise, hmm... I also dunno what will happen.  Maybe you test it out and email me :)
					<BR><BR>
					To fix the position of the popup calendar, you can change the values of the variables <U>fixedX</U> and <U>fixedY</U>.  Setting them to -1 will make them appear just below the trigger control.<BR><BR>
					To start the week on Monday, just amend the <U>startAt</U> variable at the beginning of the javascript file. Assigning a value of 0 will start the week on Sunday, and 1 will start the week on Monday.
					<BR><BR>
					To show week numbers as well (for compliance to ISO-8601 standard), change the <U>showWeekNumber</U> variable to 1.
					<BR><BR>
					<font style='font-size:9px;color:#ff0000'>[ new ]</font> To hide today's date, change the <U>showToday</U> variable to 0.
					<BR><BR>
					<font style='font-size:9px;color:#ff0000'>[ new ]</font> An example to translate into another language :
					<blockquote>
						&lt;script language="JavaScript"&gt;<BR>
						&lt;!--<BR>
						addHoliday(25,12,0, "Weihnachten")<BR>
						addHoliday(1,1,0, "Neujahr")<BR><BR>

						monthName = new<BR>
						Array("Januar", "Februar", "M&auml;rz", "April", "Mai", "Juni", "Juli", "August", "S
						eptember", "Oktober", "November", "Dezember")<BR>
						gotoString = "Zum aktuellen Monat"<BR>
						todayString = "Heute ist"<BR>
						weekString = "KW"<BR><BR>

						startAt = 1<BR>
						dayName = new Array ("Mo","Di","Mi","Do","Fr","Sa","So")<BR><BR>

						//--&gt;<BR>
						&lt;/script&gt;
					</blockquote>
					(extracted from Mr. Ralph Schaer's email to me :P)
					<BR><BR>
					<font style='font-size:9px;color:#ff0000'>[ new ]</font> To specify a image path for the required images, set <U>imgDir</U> variable to contain the string of the path.
					<BR><BR><BR>
					<B><U>Defining Holidays</U></B><BR><BR>
					To insert a holiday, use the following javascript function :
					<blockquote>addHoliday (date, month, year, description)</blockquote>
					If the year is set to 0 (zero), all the years with that date will be defined as a holiday.  For example,
					<blockquote>addHoliday(25,12,0, "Christmas Day")</blockquote>
					<BR>
					<B><U>Compatibility</U></B><BR><BR>
					Only tested with IE6 and Netscape 6. Guarantee won't work in Opera, Netscape 4 and IE for Macintosh. Perhaps some kind soul would like to fix this issue for me :) <BR><BR>

					<B><U>Disclaimer</U></B><BR><BR>
					The author will not assume any responsibilities including damages resulting from either proper or improper usage of the script. Hence, use it at your own risk. Bug reports are welcomed, however the author reserve the rights to decide whether to fix them or not (due to having other commitments). In the event the bug cannot be resolved by the author, no responsibilities must be assumed.
					</div></font>
					</td>
					<td width='100' bgcolor='#f0f0f0' valign=top style='padding:15px' style='border-color:#d0d0d0; border-width:1px; border-style:solid'>
						<font style='line-height:17px'>
							<B>Web Hoster</B><BR>
							<a href='http://www.pghoster.com'>pgHoster</a>
							<BR><BR>
							<B>Author</B><BR>
							<a href='mailto:fuushikaden@yahoo.com'>Email Me</a>
						</font>
					</td>
					</tr></table>
				</td></tr>

				<tr height=30 bgcolor='#f0f0f0'><td><CENTER><FONT COLOR="#808080">copyright &copy; 2004 <B>fuushikaden web studio</B></FONT></CENTER></td></tr>
			</table>
		</center>
	</body>
</html>